Skip to main content

Verify SDK for Web

In this comprehensive guide, we'll navigate you through the essential steps to kickstart your journey with the Synaps Verify SDK on Web platform.

Add package​

npm install @synaps-io/verify-sdk

Properties​

sessionId string

Unique verification session identifier

mode string

  • modal - Opens a modal using Synaps.show()
  • embed - Load directly into your div containerId

onFinish() callback (optional)

Callback when the user finishes the verification process

onClose() callback (optional)

Callback when the user closes the verification process

service string (optional)

  • individual for KYC (default)
  • corporate for KYB

containerId string (optional)

required when using embed mode

withFinishButton boolean (optional)

When using embed mode, add a finish button on the offboarding screen

lang string (optional)

User language preference

  • en - English
  • fr - French
  • de - German
  • es - Spanish
  • it - Italian
  • ja - Japanese
  • ko - Korean
  • pt - Portuguese
  • ro - Romanian
  • ru - Russian
  • tr - Turkish
  • vi - Vietnamese
  • zh-CN - Simplified Chinese
  • zh-TW - Traditional Chinese
warning

You can filter steps by Level thanks to the level=$LEVEL_ID query parameter.

Web librairies

Javascript

Javascript

Reusable, encapsulated HTML elements for building web applications.
Use it
React

React

React is a javaScript library for building user interfaces based on UI components
Use it
Vue

Vue

Progressive JavaScript framework for building user interfaces.
Use it
Angular

Angular

Angular is a TypeScript-based, free and open-source web application framework
Use it
Svelte

Svelte

A lightweight, efficient JavaScript framework for building UIs.
Use it

Javascript​

1. Add Synaps element​

There is two integration methods: modal or embed

modal: place a button and open the verification flow when user click on the button

embed: integrate directly the verification flow into your interface

2. Modal integration (verify with Synaps button)​

Add the following element to your page to add the button.

<button id="synaps-btn">Verify with Synaps</button>
warning

Don't forget to replace $YOUR_SESSION_ID with your own session id.

3. Embed integration​

Add the following element to add the verification flow to your page.

<div class="App">
  <div style="width: 300px; height: 600px;" id="synaps-wrapper"></div>
</div>
warning

Don't forget to replace $YOUR_SESSION_ID with your own session id.

React​

  1. Add package
  2. Read properties
  3. Test examples

Verify example with Modal mode

import { Synaps } from "@synaps-io/verify-sdk";
import { useEffect } from "react";

const Modal = () => {
  useEffect(() => {
    // Prevent multiple initializations with react strict mode
    // https://react.dev/learn/synchronizing-with-effects#fetching-data
    let init = true;

    Synaps.init({
      sessionId: "$YOUR_SESSION_ID",
      onFinish: () => {
        alert("Verification finished");
      },
      mode: "modal",
    });

    return () => {
      init = false;
    };
  }, []);

  const handleOpen = () => {
    Synaps.show();
  };

  return (
    <div className="App">
      <button onClick={handleOpen}>Start verification</button>
    </div>
  );
};

export default Modal;

Verify example with Embed mode

import { Synaps } from "@synaps-io/verify-sdk";
import { useEffect } from "react";

const Embed = () => {
  useEffect(() => {
    // Prevent multiple initializations with react strict mode
    // https://react.dev/learn/synchronizing-with-effects#fetching-data
    let init = true;

    Synaps.init({
      sessionId: "$YOUR_SESSION_ID",
      onFinish: () => {
        alert("Verification finished");
      },
      mode: "embed",
    });

    return () => {
      init = false;
    };
  }, []);

  return (
    <div className="App">
      <div style={{ width: 300, height: 600 }} id={"synaps-wrapper"} />
    </div>
  );
};

export default Embed;

Vue​

  1. Add package
  2. Read properties
  3. Test examples

Verify example with Modal mode

<script>
import {Synaps} from "@synaps-io/verify-sdk";
import {defineComponent} from "vue";

export default defineComponent({

  mounted() {
    Synaps.init({
      sessionId: "$YOUR_SESSION_ID",
      mode: "modal",
      onFinish: () => {
        alert("Verification finished")
      }
    })
  },

  methods: {
    handleOpen() {
      Synaps.show();
    }
  }
})
</script>

<template>
  <div>
    <button v-on:click="this.handleOpen()">
      Start verification
    </button>
  </div>
</template>

Verify example with Embed mode

<script>
import { Synaps } from "@synaps-io/verify-sdk";
import { defineComponent } from "vue";

export default defineComponent({

  mounted() {
    Synaps.init({
      sessionId: "$YOUR_SESSION_ID",
      mode: "embed",
      onFinish: () => {
        alert("Verification finished")
      }
    })
  },
})
</script>

<template>
    <div>
        <div style="width: 300px; height: 600px" id="synaps-wrapper"></div>
    </div>
</template>

Svelte​

  1. Add package
  2. Read properties
  3. Test examples

Verify example with Modal mode

<script lang="ts">
  import {Synaps} from "@synaps-io/web-sdk";
  import {onMount} from "svelte";

  onMount(() => {
    Synaps.init({
      sessionId: "$YOUR_SESSION_ID",
      mode: "embed",
      onFinish: () => {
        alert("Verification finished")
      }
    })
  })
</script>

<main>
  <div style="width: 300px; height: 600px" id="synaps-wrapper"/>
</main>

Verify example with Embed mode

<script lang="ts">
  import {Synaps} from "@synaps-io/web-sdk";
  import {onMount} from "svelte";

  onMount(() => {
    Synaps.init({
      sessionId: "$YOUR_SESSION_ID",
      mode: "modal",
      onFinish: () => {
        alert("Verification finished")
      }
    })
  })

    function handleOpen() {
        Synaps.show()
    }
</script>

<main>
  <button on:click={handleOpen}>
    Start verification
  </button>
</main>

Angular​

  1. Add package
  2. Read properties
  3. Test examples

Verify example with Modal mode

<div>
  <button (click)="handleOpen()">Start verification</button>
  <div id="synaps-wrapper"></div>
</div>

Verify example with Embed mode

<div>
  <button (click)="handleOpen()">Start verification</button>
  <div id="synaps-wrapper"></div>
</div>